<template>
  <div>
    <div>搜索结果</div>
    <ul class="" id="list">
      <li v-for="(v,i) in ls" :key="i" @click="song(v.filename)">
        <a class="" v-text="v.filename"></a>
        <span class="mui-icon mui-icon-search"></span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ls: '',
    }
  },
  created() {
  },
  computed: {
    searchRes: function() {
      return this.$store.state.mutations.searchRes
    },
  },
  watch: {
    'searchRes': function(n, o) {
      this.ls = n;
      console.log('n:', n);
    },
  },
  methods: {
    song(val) {
      console.log('val:', val);
      this.$router.push('/searchSong/SearchRes');
      this.$store.dispatch('SearchWord', val)
      var that = this;
      var formdata = new FormData();
      formdata.append('keyword', val)
      that.$http({
        url: '/Search',
        method: 'post',
        data: formdata
      }).then((res) => {
        if (res.data.error == '参数不合法') {
          console.log('参数不合法');
        } else {
          var keys = '';
          localStorage.getItem('val') ? keys = JSON.parse(localStorage.getItem('val')) : keys = [];
          var filte = keys.filter(function(v) { //过滤时间
            return v.val == val
          });
          if (filte[0]) {
          } else {
            console.log('没有这条数据：', filte);
            keys.push({
              'val': val,
            })
            localStorage.setItem('val', JSON.stringify(keys))
            console.log(res.data);
          }
          that.$store.dispatch('searchRes', res.data.data.info)
        }
      })
    }
  }
}
</script>
<style scoped>
#list li:nth-child(1),
#list li+li {
  border-bottom: 1px solid #676767;
}

#list {
  margin-top: 8px;
}

#list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  align-items: center;
}

#list li a {
  color: #c3c3c3;
}

#list li span {
  font-size: 18px;
}
</style>

